<template>
<div>
  <div class="mine">
    <template v-if="dataList.length > 0">
    <div class="item" v-for="(ele, index) in dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="ele.id">
      <div class="first">
        <div>
          <img :src="ele.logo" alt="">
          <span>课程{{index + 1}}：{{ele.name}}</span>
        </div>
        <div>
          <span :class="ele.level <= 100 ? 'LvOne' : ele.level > 100 && ele.level <= 200 ? 'LvTwo' : 'LvThree' ">LV{{ele.level}}</span>
          <!-- <span>LV{{ele.level}}</span> -->
        </div>
      </div>
      <div class="second">
        <div>
          <img src="@/assets/keshi1.png" alt="">
          <span>{{ele.majorName}}</span>
        </div>
        <div>
          <img src="@/assets/keshi2.png" alt="">
          <span>{{ele.hours}} 课时</span>
        </div>
      </div>
      <div class="third">
        <div>
          <span></span>
          <span>{{ele.startdate}}</span>
        </div>
        <div>
          <span></span>
          <span>至</span>
          <span></span>
          </div>
        <div>
          <span></span>
          <span>{{ele.enddate}}</span>
          </div>
      </div>
      <div class="fourth">
        <div @click="toTeachMaterial(ele, index)">
          <img src="@/assets/keshi3.png" alt="" class="material"/>
          <img src="@/assets/material-2.png" alt="" class="material-2"/>
          <span>教学资料</span>
        </div>
        <div @click="preparing(ele, index)">
          <img src="@/assets/keshi4.png" alt="" class="preparing"/>
          <img src="@/assets/preparing-2.png" alt="" class="preparing-2"/>
          <span>课程准备</span>
        </div>
      </div>
    </div></template>
    <div v-else style="height:300px;padding-top: 100px;margin:auto;">
      <span>暂无课程</span>
    </div>
  </div>
  <div class="block" style="display:flex; justify-content:center">
  <el-pagination
   @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="currentPage"
     :page-size="pagesize"
    layout="prev, pager, next"
    background
    :total="dataList.length">
  </el-pagination>
</div>
</div>
</template>

<script>
import { getMyLesson } from '@/api/lessonPreparation/myLesson';
export default {
  data() {
    return {
      dataList: [],
      currentPage: 1,
      currentIndex: '',
      pagesize: 8
    };
  },
  methods: {
    async getLesson() {
      // console.log(sessionStorage.getItem('userid'));
      const res = await getMyLesson({id: sessionStorage.getItem('userid')});
      console.log(res);
      this.dataList = res.data;
    },
    // 跳转到教学资料
    toTeachMaterial(val, i) {
      console.log(val);
      this.$router.push({
        path: '/resourcesMaterial',
        query: {id: val.id, index: i
        }
      });
    },
    // 跳转到课程准备
    preparing(val, i) {
      // console.log(val);
      this.$router.push({
        path: '/coursePreparation',
        query: {id: val.id, index: i
        }
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  created() {
    this.getLesson();
  }
};
</script>

<style scoped lang="less">
.mine{
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  padding-right: 0;
  padding-top: 0px;
  .item{
    width: 445px;
    height: 318px;
    background: #FFFFFF;
    box-shadow: 2px 2px 6px 0px rgba(153, 153, 153, 0.5);
    border-radius: 8px;
    padding: 0px 20px;
    box-sizing: border-box;
    margin-right: 30px;
    margin-top: 20px;
    .first{
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div{
        &:nth-child(1){
          display: flex;
          align-items: center;
          img{
          height: 64px;
          width: 64px;
          margin-right: 16px;
          }
          span{
            font-size: 16px;
            font-weight: 400;
            color: #333333;
          }
        }
        &:nth-child(2){
          span{
            display: inline-block;
            width: 69px;
            height: 25px;
            // background: #F8BEF9;
            border-radius: 13px;
            color: white;
            text-align: center;
            font-size: 16px;
          }
        }
      }
    }
    .second{
      // margin-top: 7px;
      height: 30px;
      display: flex;
      // align-items: center;
      margin-top: 24px;
      margin-bottom: 20px;
      div{
        // line-height: 67px;
        width: 136px;
        // margin: 0;
        // padding: 0;
        // padding-top: 24px;
        display: flex;
        align-items: center;
        img{
          height: 26px;
          width: 26px;
          margin-right: 10px;
        }
        span{
          font-size: 14px;
          font-weight: 400;
          // line-height: 67px;
        }
        &:nth-child(1){
          border-right: 1px solid #F5F5F5;
          span{
            color: #F8BB35;
          }
        }
        &:nth-child(2){
          margin-left: 54px;
          span{
            color: #BA43F6;
          }
        }
      }
    }
    .third{
      display: flex;
      // width: 300px;
      justify-content: space-between;
      padding: 24px 0px;
      border-bottom: 1px solid #F5F5F5;
      border-top: 1px solid #F5F5F5;
      div{
        display: flex;
        align-items: center;
        &:nth-child(1), &:nth-child(3) {
        width: 140px;
        height: 23px;
        background: #F5F5F5;
        border-radius: 12px;
          span{
            &:nth-child(1){
              margin-left: 10px;
              display: inline-block;
              width: 5px;
              height: 5px;
              background: #D5D5D5;
              border-radius: 50%;
              margin-right: 5px;
            }
            &:nth-child(2){
              font-size: 14px;
              font-weight: 400;
              color: #555555;
            }
          }
        }
        &:nth-child(2){
          span{
            &:nth-child(1), &:nth-child(3){
              display: inline-block;
              width: 45px;
              height: 0px;
              border-bottom: 1px dashed #D5D5D5;
              margin: 5px;
            }
          }
        }
      }
    }
    .fourth{
      display: flex;
      justify-content: space-evenly;
      div{
        width: 133px;
        height: 38px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF42CD;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          height: 25px;
          width: 25px;
          margin-right: 10px;
        }
        span{
          color: #FF42CD;
          font-size: 14px;
        }
        .preparing-2{
          display: none;
        }
        .material-2{
          display: none;
        }
      }
      div:hover{
        // border: 1px solid #333;
        background: #FF42CD;
        cursor: pointer;
        span{
          color: #FFFFFF;
        }
        .preparing-2{
          display: inline-block;
        }
        .preparing{
          display: none;
        }
        .material-2{
          display: inline-block;
        }
        .material{
          display: none;
        }
      }
    }
  }
}
.block{
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
.LvOne{
        background: #c5f5d1;
      }
.LvTwo  {
        background: #f7cbd2;
      }
.LvThree {
        background: #cbd5f5;
      }
</style>
